import React,{useEffect,useState} from "react";
import {useHistory} from 'umi'
import { Input } from "antd";
import { SearchOutlined, LeftOutlined, RightOutlined } from "@ant-design/icons";
import IconFont from "../iconfont";
import styles from "./topbar.less";
import LoginMenu from '@/components/loginMenu'
const Search: React.FC = () => {
  return (
      <Input
        placeholder="搜索"
        style={{ width: "150px",backgroundColor:'rgb(225,62,62)' }}
        prefix={<SearchOutlined />}
      />
  );
};
const Operation: React.FC = () => {
  return (
    <div className={styles["operation-wrapper"]}>
      <span className={styles["icon-item"]}>
        <IconFont type="iconshezhi" />
      </span>
      <span className={styles["icon-item"]}>
        <IconFont type="iconxinxi" />
      </span>
      <span className={styles["icon-item"]}>
        <IconFont type="iconpifu3" />
      </span>
      <span className={styles["icon-item"]}>
        <IconFont type="iconzuixiaohua" />
      </span>
    </div>
  );
};

const TopBar: React.FC = () => {
  // const [history,setHistory] = useState<any>(useHistory())
  // useEffect(()=>{
  // console.log('history()',history)
  // },[history])
  return (
    <div className={styles["topbar"]}>
      <div className={styles["topbar-left"]}>
      </div>
      <div className={styles['topbar-center']}>
        <div 
        className={styles['icon-container']}
        // onClick={()=>history?.goBack()}
        >
          <LeftOutlined />
        </div>
        <div className={styles['icon-container']}>
          <RightOutlined />
        </div>
        <Search />
      </div>
      <div className={styles["topbar-right"]}>
        <LoginMenu />
        <Operation />
      </div>
    </div>
  );
};
export default TopBar;
